<template>
  <x-main>
    <x-table ref="table" :isPage="false" @search="onSearch" showCheckbox>
      <template #status="scope">
        <el-tag :type="scope.data.status == 1 ? '' : 'info'">{{ scope.data.status == 1 ? "正常" : "停用" }}</el-tag>
      </template>
      <template #visible="scope">
        <el-tag :type="!scope.data.meta.isHide ? '' : 'info'">{{ !scope.data.meta.isHide ? "显示" : "隐藏" }}</el-tag>
      </template>
      <template #icon="scope">
        <component v-if="scope.data.meta.icon" :is="scope.data.meta.icon" style="width: 25px; height: 25px"></component>
      </template>
    </x-table>
  </x-main>
</template>

<script setup name="x-menu">
import useStore from '@/stores/modules/sys/hook/assignMenu';
const assignMenu = useStore();

import {onMounted, ref} from "vue";

onMounted(async () => {
  assignMenu.init(table)
})

let table = ref();

/**
 * 搜索
 * @param condition
 */
const onSearch = (condition) => {
  assignMenu.getList(condition);
}

const render = async (idList) => {
  await assignMenu.getList(1, 10);
  table.value.setSelectRows(idList)
}

const getData = () => {
  let selectedList = table.value.getSelectRows()
  let idList = []
  selectedList.forEach(row => {
    idList.push(row.id)
  })

  return idList
}

defineExpose({ render, getData })
</script>
